import React, { useState, useCallback, useEffect, lazy } from 'react'

function Home() {
    const [screenWidth, setScreenWidth] = useState<number>(document.documentElement.clientWidth);
    const onResize = useCallback(() => {
        setScreenWidth(document.documentElement.clientWidth);
    }, [])

    useEffect(() => {
        window.addEventListener('resize', onResize);
        return (() => {
            window.removeEventListener('resize', onResize)
        })
    })

    if (screenWidth > 1024) {
        const HomePc = lazy(() => import('pages/Home/Home-pc'));
        return (<HomePc />)
    } else if (screenWidth <= 1024 && screenWidth >= 768) {
        const HomeIpad = lazy(() => import('pages/Home/Home-ipad'));
        return (<HomeIpad />)
    } else {
        const HomePhone = lazy(() => import('pages/Home/Home-phone'));
        return (
            <HomePhone />
        )
    }
}

export default Home
